<template>
    <div class="upGrade_wrapper">
      <div class="upGrade_top">
          <div class="lists-nav">
            <ul class="lists-nav-lis" ref="listsNavLis">
              <li v-for="item in navData" :key="item.agent_rank_id" :class="curType==item.agent_rank_id?'cur':''" @click="clickNav(item.agent_rank_id)"><span>{{item.title}}</span></li>
            </ul>
            <div class="lists-nav-drop" @click="topDrop">
              <img :class="isShowDropBox?'drop':''" src="https://img.wifenxiao.com/h5-wfx/images/class_down.png" alt="向下箭头">
            </div>
            <div class="lists-nav-dropbox" @click.stop="isDropBox" v-show="isShowDropBox">
              <ul class="lists-nav-dropcont">
                <li class="lists-nav-dropcont-item" :class="[item.agent_rank_id === curType ? 'active':'']" v-for="(item,index) in navData" :key="item.agent_rank_id" @click.stop="topDropItem(item.agent_rank_id,index)">{{item.title}}</li>
              </ul>
            </div>
          </div>
      </div>
      <div class="upGrade_lists">
        <div class="gradeLists_wrapper">
          <div class="gradeLists_box">
            <div class="gradeLists_box_conditions">
              <h4>硬性条件<span>下列条件必须都满足呦~</span></h4>
              <div class="conditions_list" v-if="rank_list_and && rank_list_and.length>0">
                <div class="conditions_list_item" v-for="(andItem,andInd) in rank_list_and" :key="andInd">
                  <h6>{{andItem.title}}</h6>
                  <div class="target_box">
                    <div class="target_num">
                      <span class="current">{{andItem.achieve_amount}}</span>
                      <span>{{andItem.total_num}}</span>
                    </div>
                    <div class="target_line">
                      <div class="current_line" :style="{ width: andItem.percent}"></div>
                    </div>
                    <div class="target_text">
                      <span>当前</span>
                      <span>目标</span>
                    </div>
                  </div>
                </div>
              </div>
              <div v-else>
                <no-data :noData="noData"></no-data>
              </div>
            </div>
            <div class="gradeLists_box_conditions">
              <h4>选择条件<span>下列条件满足其中之一就可以呦~</span></h4>
              <div class="conditions_list" v-if="rank_list_or && rank_list_or.length>0">
                <div class="conditions_list_item" v-for="(orItem,orInd) in rank_list_or" :key="orInd">
                  <h6>{{orItem.title}}</h6>
                  <div class="target_box">
                    <div class="target_num">
                      <span class="current">{{orItem.achieve_amount}}</span>
                      <span>{{orItem.total_num}}</span>
                    </div>
                    <div class="target_line">
                      <div class="current_line" :style="{ width: orItem.percent}"></div>
                    </div>
                    <div class="target_text">
                      <span>当前</span>
                      <span>目标</span>
                    </div>
                  </div>
                </div>
              </div>
              <div v-else>
                <no-data :noData="noData"></no-data>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
import Vue from 'vue'
import noData from '@/components/noData/index'

import { agentRankList, showAgentRank } from '@/api/user/fxs/fxsApi'
export default Vue.extend({
  components: {
    noData
  },
  data() {
    return {
      curType: '',
      navData: [],
      // 查看更多
      isShowDropBox: false,
      // 列表
      rank_list_and: [], // 硬性条件列表
      rank_list_or: [], // 选择条件列表
      noData: {
        width: '214px',
        img: 'https://img.wifenxiao.com/h5-wfx/images/user/no-data.png',
        text: '暂无数据',
        marginTop: '60px'
      }
    }
  },
  mounted() {
    this.$nextTick(res => {
      this.init()
    })
  },
  methods: {
    init() {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)
      agentRankList().then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.navData = res.data.list.reverse() // 反转数组
          this.curType = this.navData[0].agent_rank_id
          const rankListAnd = res.data.statistics_and
          const rankListOr = res.data.statistics_or
          if (rankListAnd) {
            rankListAnd.forEach((addVal, addInd) => {
              if (addVal.achieve_amount > addVal.total_num) {
                addVal['percent'] = 100 + '%'
              } else {
                addVal['percent'] = this.getPercent(addVal.achieve_amount, addVal.total_num)
              }
            })
          }
          if (rankListOr) {
            rankListOr.forEach((orVal, orInd) => {
              if (orVal.achieve_amount > orVal.total_num) {
                orVal['percent'] = 100 + '%'
              } else {
                orVal['percent'] = this.getPercent(orVal.achieve_amount, orVal.total_num)
              }
            })
          }
          this.rank_list_and = rankListAnd
          this.rank_list_or = rankListOr
        } else {
          this.$Error(res.msg)
        }
      })
    },
    // 切换订单类型
    clickNav(type) {
      this.changeRankLists(type)
      if (type != this.curType) {
        this.curType = type
      }
    },
    // 查看更多
    topDrop() {
      this.isShowDropBox = !this.isShowDropBox
    },
    isDropBox() {
      this.isShowDropBox = false
    },
    topDropItem(type, index) {
      this.changeRankLists(type)
      this.curType = type
      this.isShowDropBox = false
      const oListsNavLis = this.$refs.listsNavLis
      const jump = document.querySelectorAll('.lists-nav-lis li')
      const total = jump[index].offsetLeft
      let distance = document.documentElement.scrollLeft || document.body.scrollLeft
      // 平滑滚动，时长500ms，每10ms一跳，共50跳
      let step = total / 50
      if (total > distance) {
        smoothDown()
      } else {
        const newTotal = distance - total
        step = newTotal / 50
        smoothUp()
      }
      function smoothDown() {
        if (distance < total) {
          distance += step
          oListsNavLis.scrollLeft = distance
          setTimeout(smoothDown, 10)
        } else {
          oListsNavLis.scrollLeft = distance
        }
      }
      function smoothUp() {
        if (distance > total) {
          oListsNavLis.scrollLeft = distance
          setTimeout(smoothUp, 10)
        } else {
          distance -= step
          oListsNavLis.scrollLeft = total
        }
      }
    },
    // 计算百分比
    getPercent(num, total) {
      num = parseFloat(num)
      total = parseFloat(total)
      if (isNaN(num) || isNaN(total)) {
        return '-'
      }
      return total <= 0 ? '0%' : Math.round((num / total) * 10000) / 100.0 + '%'
    },
    changeRankLists(rankType) {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)
      const sendData = {
        agent_rank_id: rankType
      }
      showAgentRank(sendData).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          const rankListAnd = res.data.statistics_and
          const rankListOr = res.data.statistics_or
          if (rankListAnd) {
            rankListAnd.forEach((addVal, addInd) => {
              if (addVal.achieve_amount > addVal.total_num) {
                addVal['percent'] = 100 + '%'
              } else {
                addVal['percent'] = this.getPercent(addVal.achieve_amount, addVal.total_num)
              }
            })
          }
          if (rankListOr) {
            rankListOr.forEach((orVal, orInd) => {
              if (orVal.achieve_amount > orVal.total_num) {
                orVal['percent'] = 100 + '%'
              } else {
                orVal['percent'] = this.getPercent(orVal.achieve_amount, orVal.total_num)
              }
            })
          }
          this.rank_list_and = rankListAnd
          this.rank_list_or = rankListOr
        } else {
          this.$Error(res.msg)
        }
      })
    }
  }
})
</script>

<style lang="scss">
@import "src/styles/mixin";
@import "src/styles/variables";
.upGrade_wrapper{
  .upGrade_top{
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
    .lists-nav{
      position: relative;
      max-width: 750px;
      width: 100%;
      padding-right: 90px;
      border-radius:0px 0px 20px 20px;
      background:#fff;
      &-lis{
        display:flex;
        padding-right: 90px;
        overflow-x: auto;
        li{
          font-size:26px;
          flex: 1 0 auto;
          line-height: 90px;
          text-align:center;
          padding: 0 30px;
          >span{
            width: 100%;
            display: inline-block;
            position:relative;
            overflow:hidden; 
            text-overflow:ellipsis;
            white-space:nowrap;
          }
          &.cur{
            font-size:32px;
            font-weight:bold;
            >span{
              &::before{
                content: '';
                width: 100%;
                height: 5px;
                position: absolute;
                left: 0;
                bottom: 0;
                @include gradient(right,rgba(242,11,34,1),rgba(242,11,34,0.1));
              }
            }
          }
        }
      }
      &-drop{
        position: absolute;
        right: 0;
        top: 0;
        width: 90px;
        height: 90px;
        line-height: 90px;
        text-align: center;
        background-color: #fff;
        z-index: 101;
        &::before{
          position: absolute;
          right: 90px;
          top: 50%;
          content: '';
          width: 39px;
          height: 90px;
          background: url("https://img.wifenxiao.com/h5-wfx/images/class_shadow.png") no-repeat center/cover;
          z-index: 101;
          -webkit-transform: translateY(-50%);
          -moz-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
          -o-transform: translateY(-50%);
          transform: translateY(-50%);
        }
        >img{
          display: inline-block;
          width: 30px;
          vertical-align: middle;
          &.drop{
            transform:rotate(180deg);
            -ms-transform:rotate(180deg);
            -moz-transform:rotate(180deg);
            -webkit-transform:rotate(180deg);
            -o-transform:rotate(180deg);
          }
        }
      }
      &-dropbox{
        position: fixed;
        top: 90px;
        left: 0;
        width: 100%;
        height: 100%;
        max-width: 750px;
        background-color: rgba(0,0,0,.5);
        z-index: 999;
        .lists-nav-dropcont{
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          max-height: 100%;
          padding: 30px;
          background-color: #fff;
          z-index: 100;
          overflow-y: auto;
          &-item{
            font-size: 32px;
            color: #666;
            height: 60px;
            line-height: 60px;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            &.active{
              color: #ff0000;
              border-color: #ff0000;
            }
            &:nth-child(3n){
              margin-right: 0;
            }
          }
        }
      }
    }
  }
  .upGrade_lists{
    padding-top: 90px;
    .gradeLists_wrapper{
      padding: 20px 0;
      .gradeLists_box{
        &_conditions{
          margin-bottom: 20px;
          background-color: #fff;
          &:last-child{
            margin-bottom: 0;
          }
          h4{
            position: relative;
            font-weight: bold;
            font-size: 26px;
            color: #333;
            height: 96px;
            line-height: 96px;
            padding-left: 44px;
            border-bottom: 1px solid #ededed;
            >span{
              font-size: 24px;
              color: #999;
              margin-left: 20px;
            }
            &::before{
              content: '';
              position: absolute;
              left: 30px;
              top: 50%;
              width: 6px;
              height: 30px;
              background-color: #f30c23;
              transform: translateY(-50%);
            }
          }
          .conditions_list{
            padding: 0 30px;
            &_item{
              padding: 24px 0 44px 0;
              h6{
                font-size: 26px;
                color: #333;
                margin-bottom: 26px;
              }
              .target_box{
                .target_num,.target_text{
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  line-height: 40px;
                  margin-bottom: 12px;
                  >span{
                    display: inline-block;
                    font-size: 28px;
                    color: #333;
                    &.current{
                      font-weight: bold;
                      font-size: 30px;
                      color: #f30c23;
                    }
                  }
                }
                .target_line{
                  position: relative;
                  width: 100%;
                  height: 6px;
                  border-radius: 3px;
                  background-color: #ededed;
                  .current_line{
                    position: absolute;
                    left: 0;
                    width: 0;
                    height: 6px;
                    border-radius: 3px;
                    background-color: #f30c23;
                    transition: width 0.3s linear;
                    &::after{
                      position: absolute;
                      right: 0;
                      top: 50%;
                      content: '';
                      width: 16px;
                      height: 16px;
                      background: #f30c23;
                      border-radius: 50%;
                      transform: translateY(-50%);
                    }
                  }
                }
                .target_text{
                  margin-bottom: 0;
                  margin-top: 12px;
                  >span{
                    color: #999;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>